<template>
  <div id="HomePage">
    <!-- 轮播图 -->
    <div id="swiper" class="container-fuild">
      <div class="swiper-container banner-swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in swiperList" :key="index">
            <img class="swiper-lazy" :src="item.url" alt="轮播图">
            <div class="swiper-lazy-preloader"></div>
            <!-- <div class="swiper-slide-title">
              <h1>{{ item.title }}</h1>
              <p>{{ item.content }}</p>
            </div> -->
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </div>
    <!-- Tessai资管系统 -->
    <div id="bigData" class="container-fuild">
      <div class="row bigData-container">
        <div class="col-xs-12 col-sm-12 col-md-6 wow zoomIn">
          <img class="img-responsive" src="@/assets/img/img1.png" alt="健身房">
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6">
          <h2 class="bigData-title">
            优质健身房
          </h2>
            <p>健身房配备了各种先进的健身器械，包括有氧运动设备、力量训练设备和功能性训练工具，这些设备可以帮助你进行全面的锻炼，提高身体素质和健康水平。</p>
            <p>拥有专业的健身教练，他们可以根据你的个人目标和体能水平提供定制化的训练计划和指导，确保你的锻炼安全有效。</p>
            <p>提供各种团体健身课程，如瑜伽、舞蹈、动感单车等，这些课程不仅增加了锻炼的趣味性，还能让你在社交的环境中锻炼，提高锻炼的积极性和持久性。</p>
            <p>提供额外的激励，因为你可以看到其他人的健身成果，这可以鼓励你更加努力地训练。同时，定期去健身房也是一种对自己承诺的体现，这种责任感可以帮助你坚持锻炼计划。</p>
            <p>锻炼可以帮助你建立健康的生活习惯，减少久坐带来的健康风险，提高你的整体生活质量。</p>
            <p>锻炼是减轻压力和提升心情的有效方式。健身房提供了一个专注于锻炼的环境，可以帮助你放松身心，摆脱日常生活的压力。</p>
          <h2 class="bigData-device">快进入我们吧</h2>
        </div>
      </div>
    </div>
    <div id="contactUs" class="container-fuild text-center">
      <div class="container contactUs-container wow slideInUp">
        <h1>您身边的健身专家</h1>
        <h3>7x24小时提供出色的健身服务</h3>
        <button class="btn btn-default btn-sm"
          onmouseleave="this.style.borderColor='#ffffff'; this.style.backgroundColor='#ffffff'; this.style.color='#3f3f3f';"
          onmouseenter="this.style.backgroundColor='transparent'; this.style.borderColor='#ffffff'; this.style.color='#ffffff';"
          @click="navToContactPage">联系我们</button>
        <div class="contactUs-contactWay">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </div>
    <div id="customer" class="container-fuild">
      <div class="container customer-container">
        <p class="customer-title text-center">提供服务</p>
        <div class="girdBox">
          <div class="customer-block" v-for="(item, index) in customerList" :key="index">
            <div class="customer-logo">
              <img class="center-block" :src="item.logo" alt="logo">
            </div>
            <div class="customer-content1">
              <small>{{ item.content }}</small>
            </div>
            <div class="customer-content2">{{ item.title }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 为什么选择我们 -->
    <div id="whyChooseUs" class="conatiner-fuild">
      <div class="container">
        <div class="whyChooseUs-title text-center">
          <p>为什么选择我们的服务</p>
          <p>THE REASON TO CHOOSING US</p>
        </div>
        <div class="row">
          <div class="col-xs-12 col-sm-6 col-md-3 server-wrapper" v-for="(item, index) in serverList" :key="index">
            <div class="server-block wow slideInUp" onmouseenter="this.style.color='#28f';this.style.borderColor='#28f'"
              onmouseleave="this.style.color='#666';this.style.borderColor='#ccc'">
              <img class="center-block" :src="item.logo" alt="logo">
              <p class="text-center">{{ item.title }}</p>
              <div class="contentBox" v-html="item.content" onmouseenter="this.style.color='#28f'"
                onmouseleave="this.style.color='#ccc'"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Swiper from "swiper";
import { WOW } from 'wowjs';
import { getImageApi } from '@/api/api';
export default {
  name: "HomePage",
  data() {
    return {
      swiperList: [],
      customerList: [
        {
          logo: require("@/assets/img/home1.jpg"),
          title:
            "健身设备使用",
          content:
            "会员可以使用各种健身器材，包括有氧运动设备（如跑步机、椭圆机、自行车）、力量训练设备（如哑铃、杠铃、力量训练机）和功能性训练设备（如平衡球、泡沫轴）。"
        },
        {
          logo: require("@/assets/img/home2.jpeg"),
          title:
            "团体健身课程",
          content:
            "健身房通常会提供各种团体课程，如瑜伽、普拉提、动感单车、有氧操、舞蹈课程等，由专业的健身教练指导。"
        },
        {
          logo: require("@/assets/img/home3.jpeg"),
          title:
            "私人教练服务",
          content:
            "会员可以选择聘请私人教练，获得一对一的个性化训练计划和指导，以实现特定的健身目标。"
        },
        {
          logo: require("@/assets/img/home4.jpeg"),
          title:
            "营养和健康咨询",
          content:
            "一些健身房提供营养咨询和健康指导服务，帮助会员制定合理的饮食计划，以达到更好的健身效果。"
        },
        {
          logo: require("@/assets/img/home5.jpeg"),
          title:
            "健身评估和测试",
          content:
            "健身房可能会提供身体成分分析、体能测试和健康评估，帮助会员了解自己的身体状况和健身进度。"
        },
        {
          logo: require("@/assets/img/home6.jpg"),
          title:
            "洗浴和更衣室设施",
          content:
            "提供干净的更衣室、储物柜、毛巾服务和洗浴设施，方便会员在锻炼后清洁和更衣。"
        },
        {
          logo: require("@/assets/img/home7.png"),
          title:
            "会员支持和客户服务",
          content:
            "提供会员注册、续费、暂停和取消会员资格等服务，以及客户咨询和问题解决。"
        },
        {
          logo: require("@/assets/img/home8.jpeg"),
          title:
            "开放时间",
          content:
            "健身房提供灵活的开放时间，包括24小时开放的选项，以适应不同会员的日程安排。"
        }
      ],
      serverList: [
        {
          logo: require("@/assets/img/tel.png"),
          title: "设备齐全",
          content: "<p>配备了各种各样的健身器械，包括有氧运动设备（如跑步机、椭圆机、自行车）、力量训练设备（如哑铃、杠铃、力量训练机）、以及功能性训练设备等。这样的设备多样性使得会员可以进行全面的锻炼，针对不同的肌肉群和健身目标。"
        },
        {
          logo: require("@/assets/img/computer.png"),
          title: "专业指导",
          content: "<p>供专业的健身教练服务，他们可以根据个人的身体状况和健身目标制定个性化的训练计划。健身教练还能提供正确的锻炼技巧指导，帮助会员避免运动伤害，并确保锻炼效果。"
        },
        {
          logo: require("@/assets/img/qq.png"),
          title: "团体课程",
          content: "<p>提供各种团体课程，如瑜伽、普拉提、动感单车、舞蹈等。这些团体课程不仅增加了锻炼的趣味性，还能让会员在社交的环境中锻炼，增加动力和坚持性。"
        },
        {
          logo: require("@/assets/img/skill.png"),
          title: "灵活时间",
          content: "<p>提供24小时开放或者延长的营业时间，方便会员根据自己的日程安排进行锻炼。无论是早上起床后、工作日的午休时间，还是晚上下班后，会员都可以找到合适的时间进行健身。"
        }
      ]
    };
  },
  mounted() {
    /* banner-swiper */
    new Swiper(".banner-swiper", {
      loop: true, // 循环模式选项
      effect: 'fade',
      //自动播放
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false
      },
      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
        clickable: true
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      },
      // 延迟加载
      lazy: {
        loadPrevNext: true
      },
      observer: true, //修改swiper自己或子元素时，自动初始化swiper
      observeParents: true //修改swiper的父元素时，自动初始化swiper
    });
    /* customer-swiper */
    new Swiper(".customer-swiper", {
      loop: true, // 循环模式选项
      slidesPerView: 3,
      //自动播放
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      },
      observer: true, //修改swiper自己或子元素时，自动初始化swiper
      observeParents: true //修改swiper的父元素时，自动初始化swiper
    });
    /* wowjs动画 */
    var wow = new WOW({
      boxClass: 'wow',
      animateClass: 'animated',
      offset: 0,
      mobile: true,
      live: true
    })
    wow.init();
  },
  created() {
    this.getImage()
  },
  methods: {
    /** 前往联系我们页面 */
    navToContactPage() {
    },
    getImage() {
      getImageApi().then(res => {
        this.swiperList = res.data.rows;
      })
    }
  }
};
</script>
<style scoped>
/* 整体盒子 */
#HomePage {
  width: 100%;
}

/* 轮播图 */
#swiper {
  height: 600px;
}

#swiper .banner-swiper {
  width: 100%;
  height: 100%;
}

#swiper .banner-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
}

#swiper .banner-swiper .swiper-slide {
  position: relative;
}

#swiper .banner-swiper .swiper-slide-title {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999999999;
  width: 100%;
  height: 100%;
  color: #fff;
  background: rgba(51, 51, 51, 0.534);
  text-align: center;
  line-height: 80px;
}

#swiper .banner-swiper .swiper-slide-title>h1 {
  font-size: 50px;
  margin-top: 12%;
}

#swiper .banner-swiper .swiper-slide-title>p {
  font-size: 20px;
  margin-top: 1%;
  font-weight: 700;
}

/* 大数据管理系统 */
#bigData {
  padding: 100px;
  transition: all ease 0.6s;
  box-sizing: border-box;
}

#bigData .bigData-title {
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
}

#bigData p {
  font-size: 20px;
  color: #333;
}

#bigData .bigData-device {
  margin: 20px 0;
}

/* 您身边的IT专家 */
#contactUs {
  color: #fff;
  height: 400px;
  background: url("../assets/img/contact_us_bg.jpg") 0 0 no-repeat;
  background-size: 100% 100%;
  transition: all ease 0.6s;
}

#contactUs .contactUs-container {
  padding-top: 50px;
}

#contactUs .contactUs-container button {
  width: 300px;
  height: 50px;
  margin-top: 40px;
}

#contactUs .contactUs-container .contactUs-contactWay span {
  display: inline-block;
  width: 48px;
  height: 48px;
  margin: 30px;
}

#contactUs .contactUs-container .contactUs-contactWay span:nth-of-type(1) {
  background: url("../assets/img/weixin.png") 0 0 no-repeat;
  background-size: 100% 100%;
}

#contactUs .contactUs-container .contactUs-contactWay span:nth-of-type(2) {
  background: url("../assets/img/weibo.png") 0 0 no-repeat;
  background-size: 100% 100%;
}

#contactUs .contactUs-container .contactUs-contactWay span:nth-of-type(3) {
  background: url("../assets/img/twitter.png") 0 0 no-repeat;
  background-size: 100% 100%;
}

/* 客户评价 */
.girdBox {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

#customer {
  padding: 50px 0;
  box-sizing: border-box;
  background: #efefef;
  transition: all ease 0.6s;
}

#customer .customer-title {
  font-size: 30px;
  color: rgb(102, 102, 102);
  margin: 0 0 30px;
}

#customer .customer-block {
  background: #fff;
  padding: 30px;
}

#customer .customer-logo img {
  width: 100%;
  height: 150px;
  border: 1px solid #ccc;
}

#customer .customer-yh img {
  width: 34px;
  height: 34px;
}

#customer .customer-content1 {
  border-bottom: 1px solid #0ce9f1;
  height: 100px;
  margin: 20px 0;
}

#customer .customer-content2 {
  font-size: 22px;
  font-weight: bold;
}

/* 为什么选择我们 */
#whyChooseUs {
  padding: 100px;
}

#whyChooseUs .whyChooseUs-title {
  margin-bottom: 50px;
}

#whyChooseUs .whyChooseUs-title p:nth-of-type(1) {
  font-size: 25px;
  font-weight: 500;
}

#whyChooseUs .whyChooseUs-title p:nth-of-type(2) {
  font-size: 14px;
}

#whyChooseUs .server-block {
  padding: 50px 20px;
  border: 1px solid #ccc;
  border-bottom: 5px solid #ccc;
}

#whyChooseUs .server-block img {
  width: 48px;
  height: 48px;
}

#whyChooseUs .server-block>p {
  font-size: 20px;
  margin: 30px 0;
}

#whyChooseUs .server-block>div {
  color: #ccc;
}

/* 媒体查询（手机） */
@media screen and (max-width: 768px) {
  #swiper {
    height: 200px;
  }

  #bigData {
    padding: 30px;
  }

  #bigData .bigData-title {
    font-size: 20px;
  }

  #bigData .bigData-device {
    font-size: 20px;
    margin: 10px 0 10px;
  }

  #contactUs {
    height: 200px;
    transition: all ease 0.6s;
  }

  #contactUs .contactUs-container {
    padding-top: 0;
  }

  #contactUs .contactUs-container h1 {
    font-size: 25px;
  }

  #contactUs .contactUs-container h3 {
    font-size: 18px;
  }

  #contactUs .contactUs-container button {
    width: 200px;
    height: 30px;
    margin-top: 20px;
  }

  #contactUs .contactUs-container .contactUs-contactWay span {
    display: inline-block;
    width: 28px;
    height: 28px;
    margin: 10px;
  }

  #customer {
    padding: 30px 0;
    box-sizing: border-box;
    background: #fff;
  }

  #customer .customer-title {
    font-size: 16px;
    font-weight: bold;
  }

  #customer .customer-logo img {
    width: 48px;
    height: 48px;
  }

  #customer .customer-block {
    padding: 30px;
  }

  #customer .customer-block>div {
    padding: 30px 0;
  }

  #whyChooseUs {
    padding: 20px 0;
    transition: all ease 0.6s;
  }

  #whyChooseUs .whyChooseUs-title p:nth-of-type(1) {
    font-size: 20px;
    font-weight: 700;
  }

  #whyChooseUs .whyChooseUs-title p:nth-of-type(2) {
    font-size: 12px;
  }

  #whyChooseUs .server-block {
    padding: 50px 0;
    border: 1px solid #ccc;
    border-bottom: 5px solid #ccc;
  }

  #whyChooseUs .server-block img {
    width: 48px;
    height: 48px;
  }

  #whyChooseUs .server-block>p {
    font-size: 20px;
    margin: 30px 0;
  }

  #whyChooseUs .server-block>div {
    color: #ccc;
  }
}

/* 媒体查询（平板） */
@media screen and (min-width: 768px) and (max-width: 996px) {
  #swiper {
    height: 400px;
  }

  #bigData {
    padding: 60px;
  }

  #bigData .bigData-title {
    font-size: 30px;
  }

  #bigData .bigData-device {
    font-size: 30px;
    margin: 30px 0 15px;
  }

  #contactUs {
    height: 300px;
  }

  #contactUs .contactUs-container {
    padding-top: 50px;
  }

  #contactUs .contactUs-container h1 {
    font-size: 30px;
  }

  #contactUs .contactUs-container h3 {
    font-size: 20px;
  }

  #contactUs .contactUs-container button {
    width: 300px;
    height: 50px;
    margin-top: 30px;
  }

  #contactUs .contactUs-container .contactUs-contactWay span {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin: 15px;
  }

  #customer .customer-title {
    font-size: 24px;
  }

  #whyChooseUs {
    padding: 20px 0;
  }
}

.contentBox {
  height: 120px;
}
</style>
